<template>
  <div class="">
    <div class="header">
      <img src="../../static/img/gameheader.png" alt=""  class="logo"/>
    </div>
    <serachBox-view></serachBox-view>
    <!--<div class="search">
      <input type="" name="" id="" value="" placeholder="名将与征服"/>
      <button>搜索</button>
    </div>-->
    <div class="navList">
      <ul class="cf">
        <li>
          <router-link :to="{ name:'latestUpdate', params: {} }">
            最新更新
          </router-link>
        </li>
        <li>
          <router-link :to="{ name:'crack', params: {} }">
            汉化破解
          </router-link>
        </li>
        <li>
          <router-link :to="{ name:'BTgame', params: {} }">
            BT游戏
          </router-link>
        </li>
        <li>
          <router-link :to="{ name:'online', params: {} }">
            网络游戏
          </router-link>
        </li>
        <li>
          <router-link :to="{ name:'hotRank', params: {} }">
            热门排行
          </router-link>
        </li>
        <li>
          <router-link :to="{ name:'allClass', params: {} }">
            全部分类
          </router-link>
        </li>
      </ul>
    </div>
    <div class="downLoad">
      <img src="../../static/img/yxcdown.png" alt="" class="fl"/>
      <div class="fl cf text-left">
        <p class="col666">游戏虫APP下载</p>
        <p class="green">玩游戏不花钱，也能挣钱！</p>
      </div>
      <a href="" class="downBtn">免费下载</a>
    </div>
    <centerGap-view></centerGap-view>
    <div class="hot">
      <div class="title pl20">本周热门</div>
      <div class="content">
        <ul>
          <li v-if=" index < 4"  v-for="(item, index) in dataList.weekhot" :key="item.id" @click="toDetail(item.id)">
            <img :src="item.imgUrlIcon" alt="" />
            <p>{{item.name}}</p>
          </li>
        </ul>
      </div>
    </div>
    <centerGap-view></centerGap-view>
    <div class="recommend">
      <div class="title">每日推荐</div>
      <div class="content">
        <ul class="cf">
          <!--<li class="cf">
            <div class="fl ">
              <img src="/static/img/hyxd.png" alt=""  class="fl"/>
              <div class="fl ">
                <p class="font28">游戏虫APP下载</p>
                <p>43384人在玩<span> 134.6M</span></p>
                <p>（一句话描述）全新地图 高清新版</p>
              </div>
            </div>
            <div class="fr downDtn ">
              下载
            </div>
          </li>-->
          <introduceList-view  :child-msg="item" v-for="item in dataList.recommend" :key="item.id"></introduceList-view>
        </ul>
      </div>
    </div>
    <bootMask-view></bootMask-view>
  </div>
</template>

<script>
import rightButton from '../components/rightButton.vue'
import introduceList from '../components/introduceList.vue'
import bootMask from '../components/bootMask.vue'
import centerGap from '../components/centerGap.vue'
import serachBox from '../components/serachBox.vue'

export default {
  name: 'homes',
  components: {
    'rightButton-view': rightButton,
    'introduceList-view': introduceList,
    'bootMask-view': bootMask,
    'centerGap-view': centerGap,
    'serachBox-view': serachBox
  },
  data () {
    return {
      type: 'new',
      current: '汉化破解',
      dataList: {
        hotList: [],
        crack: [],
        chinesize: [],
        btweb: [],
        allplay: []
      },
      classify: {
        type: '游戏分类',
        data: []
      },
      changeType: [],
      everyDay: []
    }
  },
  created () {
    // let LocalAPI = 'http://192.168.0.101:8080/pc/pchome?id=' + this.id
    let homeAPI = '/h5/homePage'
    let that = this
    this.$request.get(homeAPI, false,
      function (res) {
        if (res.data.code === 1000) {
          that.dataList = res.data.rst
        }
      }
    )
  },
  methods: {
    toDetail (id) {
      this.$router.push({path: '/detail', query: {userId: id}})
    },
    toUp (id) {
      this.$router.push({path: '/classify', query: {tag: id}})
    },
    toBreak (path) {
      this.$router.push({path: path})
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      // console.log(vm)
    })
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  }
}
</script>
<style scoped>
  .header{
    text-align: left;
  }
  .navList a{
    color: #FFFFFF;
    font-size: 28px; /*px*/
  }
  .recommend{
    margin-top: 0px;
    padding-bottom:100px;
  }
  .downLoad .col666{
    margin-bottom: 10px;
    /*font-weight:bold;*/
    text-align:left;
  }
  .title{
    text-align: left;
    font-size: 30px; /*px*/
  }
</style>
